<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Public/growth/js/jquery.jqplot.css" />
<script type="text/javascript" src="../Public/js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="../Public/growth/js/jquery.jqplot.js"></script>
<script src="../Public/growth/js/excanvas.js" type="text/javascript"></script>
<script src="../Public/growth/js/jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script type="text/javascript" src="../Public/growth/js/jqplot.cursor.js"></script>
<script type="text/javascript" src="../Public/growth/js/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../Public/growth/js/jqplot.json2.min.js"></script>
<script type="text/javascript" src="../Public/growth/js/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../Public/growth/js/interface.js"></script>

<title>宝贝成长曲线</title>
<script type="text/javascript">
 function selectitem(index){
   switch(index){
    case 0:
    window.location.href="{:U('Public/tohome')}"
    break;
    case 1:
    window.location.href="{:U('Upload/uploadpicture')}"
    break;
    case 2:
    window.location.href="{:U('Note/addBlog')}"
    break;
    case 3:
    window.location.href="{:U('First/Index')}"
    break;
    case 4:
    window.location.href="{:U('Favorite/Index')}"
    break;
    case 5:
    window.location.href="{:U('Video/addVideo')}"
    break;
    case 6:
    window.location.href="{:U('Growth/Index')}"
    break;
    case 7:
    window.location.href="{:U('Timeshow/Index')}"
    break;
   }
}

function update()
{
   
    var height = $('#height').val();
    var weight = $('#weight').val();
  
    $.post("addShow",{height:height,weight:weight},function(data){
        $('#height').css('value','');
        $('#weight').css('value','');
        var jsonObj = $.parseJSON(data);      
        var jsonDatas = jsonObj.data;
        var jsons = [];
        var jsonw = [];
        var times = [];
        $('#chart').html('');
        $('#chartdiv').html('');
        for(var i=0;i<jsonDatas.length;i++ )
        {
            jsons.push(jsonDatas[i]['height']);
            jsonw.push(jsonDatas[i]['weight']);
            times.push(jsonDatas[i]['time']);
        }
         $.jqplot('chart',  [jsons],{
            title:'身高生长曲线',
            axisDefaults: {
                show:false,   
          //      ticks:[2012-1-3,2012-1-7,2012-1-17,2012-1-27,2012-2-7,2012-2-17,2012-2-27,2012-3-7,2012-3-17,2012-3-27],
                tickOptions: {
                  showMark:true       
              } //tickOptions结束
         },//axisDefaults结束
         axes: {
         //  xaxis:{
//             renderer: $.jqplot.dateAxisRenderer,
//             tickOptions:{
//                formatString:'%b %#d, %Y',
//                fontFamily:'date', //刻度值上字体   
//                angle:40  
//             }   
//           },
           yaxis:{
               show:false,
               max:200,
               min:20,
               tickOptions: { 
                  fontFamily:'CM' //刻度值上字体   
               }
           }//yaxis
         },//axes
         cursor: {
          show: true,
          tooltipLocation:'sw'
        }
   });
         $.jqplot('chartdiv', [jsonw],{
            title:'体重生长曲线',
            axisDefaults: {
                show:false,   
                tickOptions: {
                  showMark:true       
              } //tickOptions结束
         },//axisDefaults结束
         axes: {
           yaxis:{
               show:false,
               max:90,
               min:0,
           }
         },
          cursor: {
          show: true,
          tooltipLocation:'sw'
        }
       });
         
   });
  
}

function checknumber1()
{
    var height = $('#height').val();
    if(height<20||height>200){
      $('#testNum1').css('display','block');
      $('#testNum1').html('身高输入数据过大或过小！');   
    }
    if(isNaN(height)){
      $('#testNum1').css('display','block');
      $('#testNum1').html('请输入数字');  
    }
}

function checknumber2()
{
    var weight = $('#weight').val();  
    if(isNaN(weight)){
      $('#testNum2').css('display','block');
      $('#testNum2').html('体重请输入数字');  
    }
    if(weight<0||weight>90){
      $('#testNum2').css('display','block');
      $('#testNum2').html('体重输入数据过大或过小，请注意单位为KG');   
    }
}
function clearnumber1()
{
    $('#height').attr('value','');
    $('#testNum1').html('');
    $('#testNum1').css('display','none');
}
function clearnumber2()
{
    $('#weight').attr('value','');
    $('#testNum2').html('');
    $('#testNum2').css('display','none');
}
</script>

<style>
a{
	text-decoration: none;
	}
div{
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	/*border:solid thin;border-color:#Ff0000;*/
	}
body {
	background:#ffffff;
	margin:0px;	
}

input{
	background:#f2fbfe;
	}
textarea{
		background:#f2fbfe;
	}
.title_r{
	float:left;
	background:#ecf9fe;
	 border:#dee4e3 thin solid;
	 border-left:none;
	 border-right:none;
	 width:85%;
	 height:30px;
	 height:30px; 
	 text-align:center;
	}
#upload_bu{
	background:url(../Public/photo/image/uploadvideo.png) no-repeat left center;
	width:100%;
	height:40px;
	cursor:pointer;
	float:left;
	}	
.img_container{
	width:100%;
	height:60px;
	}
.img_name{
	width:100%;
	height:20px;
	}	
 .options{
	height:30px;
	width:170px;
	border-bottom:dotted #e3e3e3 1px;
	cursor:pointer;
	} 
 .myfontstyle{
    font-family:'黑体';
    letter-spacing:1px;
}   	
</style>

</head>

<body onload="showGrow()">
<div style="width:100%;margin-top:1.5%;">
  	<div style="margin-left:20px;width:63%; background:#ecf8fe; border:#dbdcdd thin solid; height:630px; float:left;">
   		<div class='title_r' style='width:15%;background:#d8f2fe url(../Public/photo/image/grayline.png) no-repeat right center;'>
      		<b style="line-height:30px;font-size:11pt;color:#209593; font-weight:bold;">成长曲线</b>
      	</div>
    	<div  class='title_r' >            	
        </div>
        <!--生长曲线-->
        <div class="myfontstyle" style="width:100%;">
           <div style="width:100%;height:25px;clear:both;"></div>
           <div style="margin-left:10%;color:#6c6c6c;height:40px;">  请你输入你孩子的身高:&nbsp;&nbsp;&nbsp;<input id="height" type="text" name="hight" onblur="checknumber1()" onfocus="clearnumber1()" />cm</div>
            <div id="testNum1" style="margin-left:40%;color:red;height:15px; font-size: 10pt;"></div>
           <div style="margin-left:10%;color:#6c6c6c;height:40px;">  请你输入你孩子的体重:&nbsp;&nbsp;&nbsp;<input id="weight" type="text" name="weight" onblur="checknumber2()" onfocus="clearnumber2()"  />kg</div>
            <div id="testNum2" style="margin-left:40%;color:red;height:15px; font-size:10pt"></div>
           <div style="margin-left:10%;width: 105px;height:40px;cursor:pointer;background:url(../Public/growth/update.png) center center no-repeat;"id="btnLoadData" onclick="update()" > </div>
           
           <div id="chart" style="height:200px;width:500px; "></div>
           <div id="chartdiv" style="height:200px;width:500px; "></div>
         <!--生长曲线结束-->
        </div>   
  	</div>
  	<div  style="width:4%;float:left;">
  		<div style="float:left;width:100%;background:url(../Public/photo/image/m_line.png) no-repeat center center;height:330px; "></div>
  	</div>
  	<div  style="width:28%;font-size:9pt;text-align:left;float:left;" >    
  	
       	<div style="background:url(../Public/growth/image/back.png) no-repeat;width:207px;height:218px;margin-top:20px;padding-top:40px;">
      	<div class="myfontstyle" style="font-family:'黑体';letter-spacing:1px;width:80%;color:#A0A0A0;font-size:10pt;text-align: left;">&nbsp;&nbsp;<!--Tang曲线是一条宝宝自己的生长曲线，您可以在这里定期填写宝宝的身高、体重数据，这非常的重要，因为宝宝的身体发育状况反映了宝宝的健康状况，如果Tang曲线数据库足够的充实，它将帮您解答：我的宝宝是不是吃少了？长的健康吗？-->
            </div>
    	<div style="height:30px;width:70%; background:url(../Public/photo/image/v_line.png) bottom left repeat-x;float:left;">
    	</div>
        
  	</div>
      <div  id="role" style="width:70%;clear:both;">
    	<div class="options" style="background:url(../Public/child/image/home.png) no-repeat;" onclick="selectitem(0)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addphoto.png) no-repeat;" onclick="selectitem(1)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addvideo.png) no-repeat;" onclick="selectitem(5)"></div>	
    	<div class="options" style="background:url(../Public/child/image/marker.png) no-repeat;" onclick="selectitem(3)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addfavourite.png) no-repeat;" onclick="selectitem(4)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addnote.png) no-repeat;" onclick="selectitem(2)"></div>	
    	<div class="options" style="background:url(../Public/child/image/grow.png) no-repeat;" onclick="selectitem(6)"></div>	
    	<div class="options" style="background:url(../Public/child/image/timeshow.png) no-repeat;" onclick="selectitem(7)"></div>		
        </div>
</div>
<img src="../Public/photo/image/flower.png" style="position:absolute;right:0;bottom:0; z-index:-50;" />
</body>
</html>